<template>
    <view class="countdown">
        <view class="time-display">
            <text class="time__custom__item" :class="{ [size ? `size${size}` : '']: true, 'noBgd': isBgd }"
                v-if="showDays">{{ days }}天</text>

            <text class="separator" v-if="showDays"> {{ isBgd ? ' ' : ':' }}</text>
            <text class="time__custom__item" :class="{ [size ? `size${size}` : '']: true, 'noBgd': isBgd }">
                {{ hours }}
            </text>
            <text class="separator">:</text>
            <text class="time__custom__item" :class="{ [size ? `size${size}` : '']: true, 'noBgd': isBgd }">
                {{ minutes }}
            </text>
            <text class="separator" v-if="showSeconds">:</text>
            <text class="time__custom__item" :class="{ [size ? `size${size}` : '']: true, 'noBgd': isBgd }"
                v-if="showSeconds">{{ seconds }}</text>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, } from 'vue'
import { DataUtils } from '@/utils/Data.js'
import { onHide, onShow } from '@dcloudio/uni-app'

const props = defineProps({
    time: { type: String, required: true },
    showDays: { type: Boolean, default: true },
    showSeconds: { type: Boolean, default: true },
    isBgd: { type: Boolean, default: false },
    size: { type: String, default: 22 },
})
const { time, showDays, showSeconds } = props
const emit = defineEmits(['onEnd'])

const remainingTime = ref(0)
let timer = ref(null)

const padZero = (num) => num.toString().padStart(2, '0')
const days = computed(() => {
    const totalDays = Math.floor(remainingTime.value / (1000 * 60 * 60 * 24));
    return remainingTime.value < 86400000 ? 0 : totalDays;
})

const hours = computed(() => {
    const totalHours = Math.floor((remainingTime.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    return remainingTime.value < 3600000 ? 0 : padZero(totalHours); // 不足1小时返回0
})

const minutes = computed(() => {
    const totalMinutes = Math.floor((remainingTime.value % (1000 * 60 * 60)) / (1000 * 60));
    return remainingTime.value < 60000 ? 0 : padZero(totalMinutes); // 不足1分钟返回0
})

const seconds = computed(() => {
    const totalSeconds = Math.floor((remainingTime.value % (1000 * 60)) / 1000);
    return remainingTime.value < 1000 ? 0 : padZero(totalSeconds); // 不足1秒返回0
})

const startCountdown = () => {
    if (!timer.value) {
        timer.value = setInterval(() => {
            remainingTime.value = DataUtils.daysUntil(time)
            // if (!isshow)if (isshow) remainingTime.value = recover()
            if (remainingTime.value <= 0) {
                clearCountdown()
                // uni.removeStorageSync('countdownLeaveTime')
                // uni.removeStorageSync('remainingTimeNum')
            }


        }, 1000)
    }
}

const clearCountdown = () => {
    clearInterval(timer.value)
    timer.value = null
    remainingTime.value = 0

}

onShow(() => {
    if (!remainingTime.value) {
        startCountdown()

    }
})
const recover = () => {
    const savedTime = uni.getStorageSync('countdownLeaveTime')
    const remainingTimeNum = uni.getStorageSync('remainingTimeNum')
    let time = 0
    if (savedTime > 0) {
        const elapsed = Date.now() - savedTime
        time = Math.max(0, remainingTimeNum - elapsed)
    }
    return time
}
onMounted(() => {

    startCountdown()
})

onUnmounted(() => {
    // uni.setStorageSync('countdownLeaveTime', Date.now())
    // uni.setStorageSync('remainingTimeNum', remainingTime.value)

    clearCountdown()
})
onHide(() => {
    // uni.setStorageSync('countdownLeaveTime', Date.now())
    // uni.setStorageSync('remainingTimeNum', remainingTime.value)

    clearCountdown()

})
defineExpose({
    clearCountdown
})
</script>

<style lang="scss" scoped>
.countdown {
    // display: flex;
    // align-items: center;
    // height: auto;

}

.size20 {


    font-size: 20rpx;


}

.size22 {



    font-size: 22rpx;


}

.size24 {

    font-size: 24rpx;

}

.size32 {


    font-size: 32rpx;


}

.time-display {
    display: flex;
    align-items: center;
    // height: auto;

    .time__custom__item {
        padding: 4rpx 6rpx;
        background: #9c0000;
        color: #fff;
        border-radius: 8rpx;
        font-weight: 800;
        box-sizing: border-box;
        flex-shrink: 0;
        flex-basis: auto;
        flex: 0 0 auto;

    }

    .noBgd {
        background: none;
        margin: 0;
        padding: 0;
        color: #9c0000;
        font-weight: 400;
    }
}


.separator {
    margin: 0 4rpx;
    color: #333;
    font-weight: 800;
}

.cleared-text {
    color: #999;
    font-size: 14px;
}
</style>